<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="xp20-25">
			<view class="item xmb24" v-for="item in dataList" :key="index" @click="videoShow(item)">
				<image class="itemImg" :src="item.image" mode=""></image>

				<view class="itemtext">
					{{item.name}}
				</view>
			</view>
		</view>

		<view v-if="videoPlay">
			<video style="height: 100%; width: 100%;" controls id="myvideo" :src="videoUrl"
				@fullscreenchange="screenChange"></video>

		</view>

	</z-paging>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	let test = ref('测试');

	import {
		videolists
	} from "@/network/home.js"
	import {
		topage
	} from "@/utils/common.js"

	let videoPlay = ref(false)
	let videoUrl = ref('')

	const screenChange = (e) => {
		let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
		console.log(e, "全屏");
		if (!fullScreen) {
			uni.createVideoContext("myvideo", this).pause()
			//退出全屏
			this.videoPlay = false; // 隐藏播放盒子
		}

	}

	const videoShow = (item) => {
		let videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
		console.log(item)
		videoUrl.value = item.file;
		videoContext.requestFullScreen({
			direction: 90
		});
		videoContext.play();
		videoPlay.value = true; // 显示播放盒子
	}


	const paging = ref(null)
	const dataList = ref([])
	const queryList = (pageNo, pageSize) => {
		let data = {
			page_no: pageNo,
			page_size: pageSize,
		}

		videolists(data).then(res => {
			paging.value.complete(res.data.lists);

		}).catch(err => {
			paging.value.complete(false);
		})

	}
</script>

<style lang="scss">
	.img {
		width: 220rpx;
		height: 165rpx;
		background-color: #eee;
	}

	.info {
		height: 165rpx;
	}

	.imgs {
		width: 220rpx;
		height: 124rpx;
		background-color: #eee;
	}

	.item {
		background-color: #fff;
		border-radius: 12rpx;
	}

	.itemImg {
		width: 100%;
		height: 260rpx;

	}

	.itemtext {
		padding: 10px;
		// font-size: 32rpx;
	}
</style>